<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" 
        content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="altpreso.js"></script>
  <title>altPreso: Authoring</title>
</head>
<body>
<div class="slide">
<h1 class="center">
  <small>alt</small>Preso: Authoring
</h1>
</div>

<div class="slide">
<h1>slide</h1>
<ul>
    <li>This is a simple slide.</li>
    <li>It has a <code>&lt;h1&gt;</code> heading,</li>
    <li>and usually, followed by a list of points.</li>
</ul>
</div>

<div class="slide">
<h1>slide (source)</h1>
<pre><code>&lt;div <strong>class="slide"</strong>>
&lt;h1>slide&lt;/h1>
&lt;ul>
    &lt;li>This is a simple slide.&lt;/li>
    &lt;li>It has a &lt;code>&amp;lt;h1&amp;gt;&lt;/code> heading,&lt;/li>
    &lt;li>and usually, followed by a list of points.&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>image on the left</h1>
<img class="left" alt="yellow banana" src="img/banana.jpg" />
<ul>
    <li>You can position a picture on the left,</li>
</ul>
</div>

<div class="slide">
<h1>image on the left (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>image on the left&lt;/h1>
&lt;img <strong>class="left"</strong> alt="yellow banana" src="img/banana.jpg" />
&lt;ul>
    &lt;li>You can position a picture on the left,&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>image on the right</h1>
<img class="right" alt="yellow banana" src="img/banana.jpg" />
<ul>
    <li>or the right,</li>
</ul>
</div>

<div class="slide">
<h1>image on the right (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>image on the right&lt;/h1>
&lt;img <strong>class="right"</strong> alt="yellow banana" src="img/banana.jpg" />
&lt;ul>
    &lt;li>or the right,&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>image on the center</h1>
<ul>
    <li>or just center.</li>
</ul>
<img class="center" alt="yellow banana" src="img/banana.jpg" />
</div>

<div class="slide">
<h1>image on the center (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>image on the center&lt;/h1>
&lt;ul>
    &lt;li>or just center.&lt;/li>
&lt;/ul>
&lt;img <strong>class="center"</strong> alt="yellow banana" src="img/banana.jpg" />
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>incremental</h1>
<ul>
    <li>You can set text and pictures as <em>incremental</em>,</li>
    <li class="incremental">to show'em up</li>
    <li class="incremental">one</li>
    <li class="incremental">by</li>
    <li class="incremental">one..</li>
</ul>
<img class="center incremental" alt="yellow banana" src="img/banana.jpg" />
</div>

<div class="slide">
<h1>incremental (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>incremental&lt;/h1>
&lt;ul>
    &lt;li>You can set text and pictures as &lt;em>incremental&lt;/em>,&lt;/li>
    &lt;li <strong>class="incremental"</strong>>to show'em up&lt;/li>
    &lt;li <strong>class="incremental"</strong>>one&lt;/li>
    &lt;li <strong>class="incremental"</strong>>by&lt;/li>
    &lt;li <strong>class="incremental"</strong>>one..&lt;/li>
&lt;/ul>
&lt;img class="center <strong>incremental</strong>" alt="yellow banana" src="img/banana.jpg" />
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>incremental list</h1>
<ul>
    <li>A <em>shorthand</em> to set a long list as incremental:</li>
</ul>
<p>Name all 7 rainbow colors:</p>
<ul class="incremental">
    <li>Red</li>
    <li>Orange</li>
    <li>Yellow</li>
    <li>Green</li>
    <li>Indigo</li>
    <li>Blue</li>
    <li>Purple</li>
</ul>
</div>

<div class="slide">
<h1>incremental list (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>incremental list&lt;/h1>
&lt;ul>
    &lt;li>A &lt;em>shorthand&lt;/em> to set a long list as incremental:&lt;/li>
&lt;/ul>
&lt;p>Name all 7 rainbow colors:&lt;/p>
&lt;ul <strong>class="incremental"</strong>>
    &lt;li>Red&lt;/li>
    &lt;li>Orange&lt;/li>
    &lt;li>Yellow&lt;/li>
    &lt;li>Green&lt;/li>
    &lt;li>Indigo&lt;/li>
    &lt;li>Blue&lt;/li>
    &lt;li>Purple&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>nested incremental list</h1>
<ul>
    <li>Incremental also works well with nested lists,</li>
</ul>
<ul class="incremental">
    <li>Item One
        <ol class="incremental">
            <li>item A
                <ul class="incremental">
                    <li>item I</li>
                    <li>item II</li>
                </ul>
            </li>
            <li>item B</li>
            <li>item C</li>
        </ol>    
    </li>
    <li>Item Two</li>
    <li>Item Three
        <ol> <!-- a nested list without incremental -->
            <li>item D</li>
            <li>item E</li>
        </ol>
    </li>
</ul>
</div>

<div class="slide">
<h1>nested incremental list (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>nested incremental list&lt;/h1>
&lt;ul>
    &lt;li>Incremental also works well with nested lists,&lt;/li>
&lt;/ul>
&lt;ul <strong>class="incremental"</strong>>
    &lt;li>Item One
        &lt;ol <strong>class="incremental"</strong>>
            &lt;li>item A
                &lt;ul <strong>class="incremental"</strong>>
                    &lt;li>item I&lt;/li>
                    &lt;li>item II&lt;/li>
                &lt;/ul>
            &lt;/li>
            &lt;li>item B&lt;/li>
            &lt;li>item C&lt;/li>
        &lt;/ol>
    &lt;/li>
    &lt;li>Item Two&lt;/li>
    &lt;li>Item Three
        &lt;ol> &lt;!-- a nested list without incremental --&gt;
            &lt;li>item D&lt;/li>
            &lt;li>item E&lt;/li>
        &lt;/ol>
    &lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>definition list</h1>
<ul>
    <li>and definition list as well.</li>
</ul>
<p>(Source: <cite><a 
href="http://buddhism.kalachakranet.org/resources/funny_dictionary.html">
Funny Dictionary</a></cite>)</p>
<dl class="incremental">
    <dt>Afternoon</dt>
    <dd>the part of one's day spent worrying about how the 
        morning was wasted.</dd>
    <dt>Antique</dt>
    <dd>an item your grandparents bought, your parents got 
        rid of, and you're buying again.</dd>
    <dt>Boss</dt>
    <dd>someone who is early when you are late and late 
        when you are early.</dd>
    <dt>Business</dt>
    <dd>acting busy in an office environment.</dd>
</dl>
</div>

<div class="slide">
<h1>definition list (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>definition list&lt;/h1>
&lt;ul>
    &lt;li>and definition list as well.&lt;/li>
&lt;/ul>
&lt;p>(Source: &lt;cite>&lt;a 
href="http://buddhism.kalachakranet.org/resources/funny_dictionary.html">
Funny Dictionary&lt;/a>&lt;/cite>)&lt;/p>
&lt;dl <strong>class="incremental"</strong>>
    &lt;dt>Afternoon&lt;/dt>
    &lt;dd>the part of one's day spent worrying about how the 
        morning was wasted.&lt;/dd>
    &lt;dt>Antique&lt;/dt>
    &lt;dd>an item your grandparents bought, your parents got 
        rid of, and you're buying again.&lt;/dd>
    &lt;dt>Boss&lt;/dt>
    &lt;dd>someone who is early when you are late and late 
        when you are early.&lt;/dd>
    &lt;dt>Business&lt;/dt>
    &lt;dd>acting busy in an office environment.&lt;/dd>
&lt;/dl>
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>show-first</h1>
<ul class="incremental show-first">
    <li>In a list, to show the <em>first</em> item first,</li>
    <li>then continue showing the rest</li>
    <li>one</li>
    <li>by</li>
    <li>one..</li>
</ul>
</div>

<div class="slide">
<h1>show-first (source)</h1>
<pre><code>&lt;div class="slide">
&lt;h1>show-first&lt;/h1>
&lt;ul class="incremental <strong>show-first</strong>">
    &lt;li>In a list, to show the &lt;em>first&lt;/em> item first,&lt;/li>
    &lt;li>then continue showing the rest&lt;/li>
    &lt;li>one&lt;/li>
    &lt;li>by&lt;/li>
    &lt;li>one..&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</div>

<div class="slide">
<h1>Inside &lt;head></h1>
<ul>
    <li>Finally, remember to link to <code>altpreso.js</code>,</li>
    <li>and don't forget the &lt;title>.</li>
</ul>
<pre><code>&lt;html>
&lt;head>
    <strong>&lt;script type="text/javascript" src="altpreso.js">&lt;/script>
    &lt;title>alt Preso: Authoring&lt;/title></strong>
&lt;/head>
&lt;body> .. &lt;/body>
&lt;/html></code></pre>
</div>

</body>
</html>